<template>
    <view class="container" @click="skip">
        <view class="buttons">
            <view class="time">{{ time }}</view>
            <view>跳转</view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const time = ref(5);// 倒计时
let timer = null;// 定时器
//  组件挂载时启动定时器
onMounted(() => {
    timer = setInterval(() => {
        if (time.value > 0) {
            time.value--;
            if (time.value === 0) {
                uni.navigateTo({
                    url: '/pages/login/login',
                    fail: (err) => {
                        console.error('跳转失败:', err);
                        uni.showToast({
                            title: '跳转失败，请稍后重试',
                            icon: 'none'
                        });
                    }
                });
            }
        }
    }, 1000);
});
//  组件销毁时清除定时器
onUnmounted(() => {
    if (timer) {
        clearInterval(timer);
    }
});
// 跳转
const skip = () => {
    if (timer) {
        clearInterval(timer);
    }
    uni.navigateTo({
        url: '/pages/login/login',
        fail: (err) => {
            console.error('跳转失败:', err);
            uni.showToast({
                title: '跳转失败，请稍后重试',
                icon: 'none'
            });
        }
    });
};
</script>

<style>
.time {
    margin-left: 8px;
    margin-right: 3px;
    color: rgb(92, 90, 90);
}

.buttons {
    width: 60px;
    height: 25px;
    border-radius: 13px;
    line-height: 25px;
    background-color: #fff;
    position: fixed;
    top: 90px;
    right: 20px;
    display: flex;
    text-align: center;
}

.container {
    width: 100vw;
    height: 100vh;
    background-image: url(http://lxj.skych.top//img/guide.jpg);
    background-size: 100% 100%;
    background-color: #f5f5f5;
}
</style>    